<template>
  <div class="form-comp">
    <div class="toolbar-item toolbar-select"
         v-if="label">
      <el-input size="default"
                :style="{width:(label.length==2?'68px':label.length==3?'82px':label.length==4?'96px':label.length==7?'138px':label.length==6?'128px':''),float:'left'}">
        <template #prepend>{{ label }}</template>
      </el-input>
      <el-input-number
          v-model="compValue"
          :class="label.length==3?'prepend-number-3':label.length==4?'prepend-number-4':label.length==5?'prepend-number-5':label.length==6?'prepend-number-6':label.length==7?'prepend-number-7':'prepend-number-2'"
          :min="min"
          :max="max"
          :step="step"
          controls-position="right"
      />
      <div class="define-append">{{unit}}</div>
    </div>
  </div>

</template>

<script lang="ts" setup>
//定义组件名称

defineOptions({
  name: "FormInputNumber"
});
// @ts-ignore
import {ref, onMounted, getCurrentInstance, watchEffect, watch} from 'vue'

const props = defineProps({
  label: {type: String, required: false},
  value: {type: Object, required: true},
  disabled: {type: Boolean, required: false},
  multiple: {type: Boolean, required: false, default: false},
  defaultValue:{type:Number,required: false,default:0},
  step:{type:Number,required: false,default:1},
  min:{type:Number,required: false,default:0},
  max:{type:Number,required: false,default:50},
  unit:{type:String,required:false,default:""}
});
//组件的值
const compValue = ref<any>(0);

const emit = defineEmits(['update:value'])

onMounted(() => {
  compValue.value=props.defaultValue;
})

//监听变化
watch(() => props.value, () => {
  if (props.value) {
      compValue.value = props.value;
  } else {
    compValue.value=props.defaultValue;
    emit("update:value", compValue.value + "")
  }
})

//监听变化返回
watch(() => compValue.value, () => {
  emit("update:value", compValue.value + "")
})

</script>

<style scoped>

</style>
